<template>
  <el-table-column v-if="attrs.type !== 'selection' && attrs.type !== 'index'" align="center" v-bind="attrs">
    <template slot-scope="scope">
      <!-- 显示缩略图 -->
      <template v-if="attrs.type === 'img'">
        <el-image
          v-if="_get(scope.row, attrs.prop)"
          :src="_get(scope.row, attrs.prop)"
          :style="imgSize"
          fit="cover"
          :preview-src-list="[_get(scope.row, attrs.prop)]"
        />
        <span v-else>{{ emptyHolder }}</span>
      </template>
      <!-- 自定义显示数据 -->
      <slot v-else-if="attrs.custom" :name="attrs.custom" v-bind="scope"></slot>
      <!-- 基础数据显示 -->
      <template v-else>
        <template v-if="attrs.formatter">
          {{
            attrs.formatter(
              scope.row,
              scope.column,
              _get(scope.row, attrs.prop)
            ) || emptyHolder
          }}
        </template>
        <template v-else>
          {{
            _get(scope.row, attrs.prop) === 0 || _get(scope.row, attrs.prop)
              ? _get(scope.row, attrs.prop)
              : emptyHolder
          }}
        </template>
      </template>
    </template>
  </el-table-column>
  <el-table-column v-else align="center" v-bind="attrs"></el-table-column>
</template>

<script>
  import _get from 'lodash/get'
  export default {
    props: {
      attrs: {
        type: Object,
        default() {
          return {}
        }
      },
      // 空值 占位符
      emptyPlaceholder: {
        type: String,
        default() {
          return '——'
        }
      }
    },
    data() {
      return {
        emptyHolder: this.emptyPlaceholder
      }
    },
    computed: {
      imgSize() {
        return {
          width: `${this.attrs.imageWidth || 80}px`,
          height: `${this.attrs.imageHeight || 40}px`
        }
      }
    },
    methods: {
      _get
    }
  }
</script>

<style scoped></style>
